<template>
	<view class="main">
		<view class="title" :style="{ 'background-image': `url(${bg})` }">
			<title :title="title"></title>
		</view>
<view class="box" v-if="token">
		<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scroll="scroll"
			@scrolltolower="lower">
			<view class="message-list">
				<view class="item-box" v-for="(item,index) in list" :key="index" @click="messageItem(item,index)">
					<view class="item-img" :class="isindex==index?'item-border':''">
						<image v-if='count>0' :src="numImage" mode=""></image>
						<image v-else :src="noImage" mode=""></image>
						
					</view>
					<view class="item-title">
						<view class="title-box">
							<view class="">
								<text>活动通知</text>
								<text>{{item.pinned?"已置顶":''}}</text>
							</view>
							<text class="time">{{item.time}}</text>
						</view>
						<view class="item-text">
						<text v-if="count>0" class="text-count">[未读{{count}}条]</text>  <rich-text :nodes="item.content"></rich-text>
						</view>
					</view>
				</view>
			</view>


		</scroll-view>
		</view>
		<view class="notlogin" v-else @click="login">
			<view class="">
				你还未登录
			</view>
			<view class="">
				去登录
			</view>
		</view>
	</view>

</template>

<script>
	import config from "../../utils/config";
	import {
		toast,
		getStore,
		setStore,
		removeStore
	} from "@/utils/index";
	import {
		getactivity
	} from '../../service/api.js'
	import title from '../../components/title.vue';
	export default {
		onShow() {
			this.token = getStore("token") || null;
			if (getStore("userId")) {
				this.userId = getStore("userId");
			}
			this.getlistDep();
			
			let count = this.count.toString();  
			if (count === '0') {
			    uni.removeTabBarBadge({
			        index: 1
			    });
			} else {
			   
			    uni.setTabBarBadge({
			        index: 1,
			        text: count
			    });
			}
		},
		data() {
			return {
				title: "消息中心",
				isindex: 0,
				userId: null,
				
				//背景大图
				bg: config.ossHost + '2024/12/31/1ec0168fb12c4439890d9b76ea0da037.png',
				list: [
				],
				token:"",
				numImage: config.ossHost + '2025/01/09/82ee29f8a7fd44ed9fd3a659ec12c35d.png',
				noImage: config.ossHost + '2025/01/09/397b1aeb62a348668869e0a3b31a5438.png',
			}
		},
		components: {
			title
		},
		computed: {
			
			count() {
			      return this.$store.state.count // 访问 Vuex 中的 state
			}
		
		},
		methods: {
			login() {
				uni.navigateTo({
					url: `/My/oneClicklogin/login`
				})
			},
			//获取消息列表
			async getlistDep() {
				let res = await getactivity();
				if (res.code == 200) {
					this.list = res.rows.slice(0,1);
					console.log(res,res.rows)
				}
			},
			
			
			initSession() {
				// const {
				// 	sessions
				// } = this.$store.state;
				// let unreadNum = 0;
				// const uid = getStore("uid");
				// const sessionlist = sessions[uid];
				// for (let key in sessionlist) {
				// 	if (sessionlist[key]) {
				// 		unreadNum += sessionlist[key].unread;
				// 	}
				// }
				// this.$store.commit("SET_UNREAD_NUM", unreadNum);
				// if (unreadNum > 0) {
				uni.setTabBarBadge({
					index: 1,
					text: ``
				});
				// }
			},
			
			
			messageItem(item, index) {
				this.isindex = index
				uni.navigateTo({
					url: `/outpatient/Events/index`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {}

	.title {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// background: linear-gradient(180deg, #CCA566 0%, rgba(204, 165, 102, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		height: 300rpx;
		position: fixed;
		top: 0;
		width: 100%;
	}

	.scroll-Y {
		position: fixed;
		width: 100vw;
		height: calc(100vh - 190rpx);
		margin-top: 190rpx;
		background: #fff;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.message-list {
		padding: 10rpx 24rpx 24rpx 24rpx;

		.item-box {
			display: flex;
			align-items: center;
			margin-top: 24rpx;

			.item-img {
				position: relative;
				margin-right: 24rpx;
				width: 96rpx;
				height: 96rpx;
				// border-radius: 50%;

				image {
					width: 96rpx;
					height: 96rpx;
					// border-radius: 50%;
				}

				.badge {
					display: inline-block;
					font-size: 16rpx;
					text-align: center;
					border-radius: 50%;

					position: absolute;
					top: -25rpx;
					left: 100rpx;

				}
			}

			.item-border {
				width: 96rpx;
				height: 96rpx;
				// border: 1rpx solid #909399;

				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.item-title {
				.title-box {
					display: flex;
					justify-content: space-between;
					width: 600rpx;

					.time {
						color: #808080;
						font-size: 24rpx;
					}

					view {
						display: flex;
						align-items: center;

						text:first-child {
							font-weight: bold;
							font-size: 32rpx;
						}

						text:last-child {
							margin-left: 8rpx;
							display: inline-block;
							color: #808080;
							font-size: 20rpx;
							padding: 0 5rpx;
							border-radius: 2rpx;
							background: #F5F3F0;
						}
					}

				}

				.item-text {
					margin-top: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
					width: 600rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					// border-bottom: 1rpx solid #808080;
					padding-bottom: 8rpx;
					display: flex;
					.text-count{
						
						color: #f43530;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
	.notlogin {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: calc(100vh - 370rpx);
	
		view {
			color: #B3B3B3;
		}
	
		view:last-child {
			width: 140rpx;
			margin-top: 20rpx;
			border-radius: 8rpx;
			padding: 12rpx 0;
			text-align: center;
			color: #fff;
			background: #CCA566;
		}
	}
</style>